<script setup>
import { ref } from 'vue'
const rate = ref(10)
</script>

<template>
  <div
    class="wrap"
    :style="{
      '--top': rate + '%',
      '--width': '300px',
    }"
  >
    <div class="water-group">
      <div class="water water1"></div>
      <div class="water water2"></div>
      <div class="water water3"></div>
    </div>
    <button @click="rate = 40">40%</button>
  </div>
</template>

<style lang="css">
.wrap {
  width: 100vw;
  height: 100vh;
  --top: 60%;
  --width: 300px;
}
.water-group {
  width: var(--width);
  height: var(--width);
  border: 2px solid lightskyblue;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, #3ec4fc, #0081cc);
  transform: rotate(180deg);
}

.water-group .water {
  position: absolute;
  width: 200%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(./wave.png);
  transition: top 0.25s;
}
.water-group::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--top) + 15%);
  bottom: 0;
  background-color: #fff;
  transition: top 0.25s;
}
.water-group .water1 {
  top: calc(var(--top) - 10%);
  left: -100%;
  opacity: 0.2;
  animation: water-right 5s infinite linear;
}
.water-group .water2 {
  top: calc(var(--top) - 5%);
  left: 0;
  opacity: 0.3;
  animation: water-left 10s infinite linear;
}
.water-group .water3 {
  top: var(--top);
  left: -100%;
  animation: water-right 15s infinite linear;
}
@keyframes water-right {
  0% {
    transform: translateX(0) translateZ(0) scaleY(1);
  }
  50% {
    transform: translateX(25%) translateZ(0) scaleY(0.85);
  }
  100% {
    transform: translateX(50%) translateZ(0) scaleY(1);
  }
}
@keyframes water-left {
  from {
    transform: translate(0%, 0px);
  }
  to {
    transform: translate(-50%, 0px);
  }
}
</style>
